<!DOCTYPE html>
<html lang="en">
	<head>
		<% base_tag %>
		<title>BuzzNut Design - Welcome</title>
		$MetaTags(false)
		<link rel="shortcut icon" href="/favicon.ico" />
		<% require themedCSS(buzznut) %> 
		<% require themedCSS(jquery.lightbox-0.5) %>
		<% require themedCSS(facebox) %>

	</head>

	<body>
		<div id="page-outside-wrap">
			
			<% include NavigationBar %>
            <div id="hero-contain">
            		<div id="main-hero-image">
                    		<div id="hero-content">
                    				$Content
                    		</div><!--close div id "hero-content"-->
                    </div><!--close div id "main-hero-image"-->
            </div><!--close div id "hero-contain-->
            <div id="grass-wooden-bar"></div>
            <div id="gravel-contain">
            	<div id="gravel-centre"></div>
            </div><!--close div id "gravel centre"-->
			

            
            <div id="skills-description-wrap">
            
            <div id="myskills-bar">
            	
                <div id="skills-centre">
                		<div id="myskills-heading"></div>
                        <div id="skill-items-right">
                        		<div id="skill-button-contain">
                                		<a id="scroll-skill-top" href="#top-bar"></a>
                                </div><!--close div id "scroll-skill-top"-->
                                <div id="spiral-top"></div>
                        </div><!--close div id "skills-items-right"-->
                </div><!--close div id "skills-centre"-->
                
            </div><!--close div id "myskills-bar"-->
            
            	<div id="skill-centre">
                        <div id="skill-content">
                        		$Section1
                        </div><!--div id "skill-content"-->
                        <div id="skill-pad"></div>
                        
                        <div id="skills-next-wrap"><a href="#heading-green" id="skills-next-button"></a></div>
                </div><!--close div id "skill-centre"-->
            </div><!--close div id "skills-description-wrap"-->
            
            <div id="work-description-wrap">
            	<div id="heading-green">
                		<div id="heading-centre">
                        
                        	<div id="works-heading"></div>
                            
                            <a id="works-button-top" href="#top-bar"></a>
                            
                        </div><!--close div id "heading-centre"-->
                </div><!--close div id "heading-green"-->
                <div id="work-description-centre">
                		<div id="work-description-content">
                        		$Section2
											
                        </div><!--close div id "work-description-content"-->
                        
               <div id="work-thumbnail-contain">
                		<div id="container-top"></div>
                        <div id="container-middle">
                        	
                        		<% control FolioWorks %>
										<div class="thumbnail-wrap">
											<% control FolioImage %>
												<a href="$URL" class="lightbox">
														<img src="$SetRatioSize(124, 124).URL" alt="Folio Example" title="Folio Example" />
													<!-- can only use control two levels which is why it has been used again -->
												</a>
											<% end_control %>
										</div>
								<% end_control %>
								
                        		<!--<table cellspacing="15" cellpadding="0" width="0" border="0" id="work-display">
                                		<tr>
                                        	<td><a href="$ThemeDir/images/internetrix.jpg" class="lightbox"><img src="images/work-thumb-irx.gif" alt="Internetrix - Concept" title="Internetrix - Concept" /></a></td>
                                            <td><a href="$ThemeDir/images/dapto-mall.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-amcal.gif" alt="Dapto Mall Phamacy - Final Concept" title="Dapto Mall Phamacy - Final Concept" /></a></td>
                                            <td><a href="$ThemeDir/images/aus-lock.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-bilock.gif" alt="Australian Lock Company - Final Concept" title="Australian Lock Company - Final Concept" /></a></td>
                                            <td><a href="$ThemeDir/images/angel.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-angel.gif" alt="Angel Group - Final Concept" title="Angel Group - Final Concept" /></a></td>
                                        </tr>
                                        <tr>
                                        	<td><a href="$ThemeDir/images/elitejet.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-elitejet.gif" alt="EliteJet - Aircraft Brochure" title="EliteJet - Aircraft Brochure" /></a></td>
                                            <td><a href="$ThemeDir/images/corban.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-corban.gif" alt="Corban Automotive Group - Final Concept" title="Corban Automotive Group - Final Concept" /></a></td>
                                            <td><a href="$ThemeDir/images/image1.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-maggie.gif" alt="Maggie Gyllenhaal - Sketch" title="Maggie Gyllenhaal - Sketch" /></a></td>
                                            <td><a href="$ThemeDir/images/image2.jpg" class="lightbox"><img src="$ThemeDir/images/work-thumb-selfportrait.gif" alt="Self Portrait" title="Self Portrait" /></a></td>
                                        </tr>
                                </table>-->
								
                        </div><!--close div id "container-middle"-->
                        <div id="container-bottom"></div>
                </div><!--close div id "work-thumbnail-contain"-->
                
                
                <div id="works-next-wrap"><a href="#contact-wrap" id="works-next-button"></a></div>
                
                </div><!--close div id "work-description-centre"-->
                    
            </div><!--close div id "work-description-wrap-->
            
            <div id="contact-wrap">
            
            	<div id="heading-roots">
                		<div id="contact-heading-centre">
                        
                        	<div id="contact-works-heading"></div>
                            
                            <a id="contact-works-button-top" href="#top-bar"></a>
                            
                        </div><!--close div id "heading-centre"-->
                </div><!--close div id "contact-heading-roots"-->
                
                <div id="hole-container">
                		<div id="contact-details-contain">
                        		$Section3
								<div id="mail-skype">
                                		<!--<div id="mail"><p><a href="mailto:$Email">$Email</a></p></div>-->
                                		
                                			<div id="mail"><a href="#form" rel="facebox">Send a comment</a></div>
								            <div id="form" style="display:none;">$Form</div>
								            
                                        <div id="skype"><p>skype: $Skype</p></div>
                                </div><!--close div id "mail-skype"-->
                        </div><!--close div id "contact-details-contain-->
                </div><!--close div id "hole-container"-->
            
            </div><!--close div id "contact-wrap"-->
		
		</div><!--close div id "page-outside-wrap"-->
		
	</body>
</html>
